<script>
import { computed, defineComponent } from 'vue'
import * as Antd from 'ant-design-vue'
import { VideoCameraOutlined } from '@ant-design/icons-vue'
import { isImage, isJSON } from '@Untils'
import { Modal } from 'ant-design-vue'
import { ModalSize, Messages } from '@Config/config'

export default defineComponent({
  components: { VideoCameraOutlined },
  props: {
    image_list: {
      type: [Array, String],
      default: true,
    },
    avatar: {
      type: Object,
      default: () => {
        return {}
      },
    },
    group: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  setup(props, context) {
    let image_list = computed(() => {
      if (props.image_list instanceof Array) {
        return props.image_list
      } else if (typeof props.image_list == 'string') {
        if (isJSON(props.image_list)) {
          return JSON.parse(props.image_list)
        }
      }
      return []
    })

    let avatar = computed(() => {
      return props.avatar
    })
    let group = computed(() => {
      return props.group
    })
    let previewVideo = (_video_path) => {
      let win = Modal.info({
        title: '视频预览',
        closable: true,
        content: (
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
              marginLeft: '-38px',
            }}
          >
            {
              <video
                src={_video_path}
                width="320"
                autoplay
                loop
                controls
              ></video>
            }
          </div>
        ),
        width: ModalSize.small,
        class: ['noFooterButtonModal', 'paddingContextModal'],
      })
      Messages.add(win)
    }

    return {
      image_list,
      avatar,
      previewVideo,
      group,
    }
  },
  render() {
    return (
      <Antd.AvatarGroup
        max-count={1}
        max-style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
        {...this.group}
      >
        {this.image_list.map((img) => {
          let _is_img = isImage(img)
          return (
            <div
              style={{
                position: 'relative',
              }}
              title={'点击查看大图'}
            >
              <Antd.Avatar
                key={img}
                src={img}
                style={{ 'backgorund-color': '#f56a00' }}
                {...this.avatar}
                v-slots={
                  _is_img
                    ? {}
                    : {
                        icon: () => {
                          return <VideoCameraOutlined />
                        },
                      }
                }
              ></Antd.Avatar>

              {_is_img ? (
                <div
                  style={{
                    position: 'absolute',
                    left: '0px',
                    top: '0px',
                    width: '100%',
                    height: '100%',
                    opacity: 0,
                  }}
                >
                  <Antd.Image src={img} />
                </div>
              ) : (
                <div
                  style={{
                    position: 'absolute',
                    left: '0px',
                    top: '0px',
                    width: '100%',
                    height: '100%',
                    opacity: 0,
                  }}
                  onClick={() => {
                    this.previewVideo(img)
                  }}
                >
                  <VideoCameraOutlined />
                </div>
              )}
            </div>
          )
        })}
      </Antd.AvatarGroup>
    )
  },
})
</script>
